<template>
  <!-- 课程详情页 -->
  <div class="qy-page-course-detail pbm" id="page-course-detail">
    <uni-nav-bar fixed shadow :border="false" :title="'【培训项目】' + (info && info.name || '')" left-icon="left"
                 @clickLeft="onClickLeft"></uni-nav-bar>
    <view>
      <div class="page-banner">
        <div class="banner-default-img flex-wrap flex-middle flex-center"
             :style="{ background: 'url(' + info.imageHttpUrl + ') center no-repeat' }" v-if="info.imageHttpUrl">
          <div class="banner-default-text ellipsis2" >{{ info.name }}</div>
        </div>
        <div class="banner-default-img flex-wrap flex-middle flex-center" v-else>
          <div class="banner-default-text ellipsis2">{{ info.name }}</div>
        </div>
      </div>
      <div class="page-info-wrap">
        <div class="info-base">
          <div class="info-content">
            <div class="left">{{ info.name }}</div>
          </div>
          <div class="list-bottom mt10 flex-wrap flex-text-mid">
            <p class="fs-12 fc-999">{{ info.categoryName }}</p>
            <span class="split-line"></span>
            <p class="fs-12 fc-999">共{{ info.jobNum || 0 }}任务</p>
            <span class="split-line"></span>
            <p class="fs-12 fc-999">{{ info.studyUserNum || 0 }} 人加入学习</p>
          </div>
          <div class="bottom flex-wrap  flex-wrap flex-text-mid">
            <i class="icon-clock"></i>
            <span class="common-font">{{ info.startDate }}</span>
          </div>
          <div class="bottom_2 bottom flex-wrap flex-text-mid" >
            <i class="icon-laiyuan"></i>
            <span class="common-font ellipsis">{{ info.siteName }}</span>
          </div>
        </div>
      </div>
    </view>
    <div class="certificate-warp">
      <div class="certificate">
        <div class="detail-num flex-wrap">
          <p class="fs-12">已完成：{{ info.passNum || 0 }}</p>
          <p class="fs-12">完成必学：{{ info.passMustPassJobNum || 0 }} / {{ info.mustPassJobNum || 0 }}</p>
          <p class="fs-12">学习天数：{{ info.studyDay || 0 }}</p>
        </div>
      </div>
    </div>

    <!-- TABS -->
    <div class="page-tab-wrap">
      <div class="page-tab-group"></div>
      <van-tabs v-model="activeTab" sticky>
        <van-tab title="内容">
          <StageList
              :list="stageList"
              :planId="id"
              :disabled="info.learnStatus != 4 && info.learnStatus != 7"
              @update="getPlanStageList"
          ></StageList>
        </van-tab>
        <van-tab title="详情">
          <div v-html="courseContent" class="w-e-text course-base"></div>
          <Data-empty v-if="!courseContent"></Data-empty>
        </van-tab>
        <van-tab title="评价">
          <Appraise :courseId="id" :courseType="type"></Appraise>
        </van-tab>
        <van-tab title="讨论">
          <DiscussList :courseId="id" :type="type" ></DiscussList>
        </van-tab>
        <van-tab title="资料">
          <CourseData :courseId="id"></CourseData>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import DiscussList from "@/components/course/Discuss.vue";
import CourseData from "@/components/course/CourseData.vue";
import Appraise from "@/components/course/Appraise.vue";
import StageList from "@/components/training/StageList.vue";
import DataEmpty from '@/components/common/DataEmpty'
import VanIcon from "@/components/vant/van-icon/van-icon.vue";
import VanPopover from "@/components/vant/van-popover/van-popover.vue";
import VanTabs from "@/components/vant/van-tabs/van-tabs.vue";
import VanTab from "@/components/vant/van-tab/van-tab.vue";
import infoMock from "@/mock/train/info.json"
import stageListMock from "@/mock/train/stageList.json"
export default {

  head() {
    return {
      title: "培训项目"
    };
  },
  components: {
    VanTab,
    VanTabs,
    VanPopover,
    VanIcon,
    DiscussList,
    CourseData,
    StageList,
    Appraise,
    DataEmpty
  },
  data() {
    return {
      info: {}, // 课程基础信息
      activeTab: 0, // 选中的TAB index
      id: "", // 课程ID
      courseContent: "",
      type: "T",
      stageList: [],
      thumbUp: {}
    };
  },
  onShow() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.getInfo();
      this.getPlanStageList();
    },

    onClickLeft() {
      uni.navigateBack({delta: 1});
    },

    goDetail(type, id) {
      if (type === "C") {
        this.$uniRedirectTo({
          name: "course-detail-id",
          params: {
            id: id
          }
        });
      } else {
        this.$toast.warning("暂不支持，敬请期待");
      }
    },
    getInfo() {
		this.info=infoMock.data;
      this.getThumbUpInfo()
    },
    getPlanStageList() {
	  let res=stageListMock.data;
      let arr = res || [];
      this.sourseStageList = arr;
      this.stageList = arr;
      this.stageList.forEach(c => c.show = false)
    },

    getThumbUpInfo() {
      this.thumbUp={
		  thumbUpFlag: "2",
		  thumbUpNum: 1
	  }
    }
  }
};
</script>

<style lang="scss" scoped>

@import "@/static/css/variable.scss";

:deep() {
  .van-popover--dark .van-popover__content {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }

  .van-popover__wrapper {
    line-height: 0;
  }
}

.tip-text {
  padding: 4px 10px;
}

.qy-page-course-detail {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none;

  &.pbm {
    padding-bottom: 74px;
  }

  .page-banner {
    position: relative;
    font-size: 0;

    .quit-btn {
      position: absolute;
      right: 10px;
      top: 6px;
      font-size: 22px;
      color: #fff;
    }

    .banner-default-img {
      width: 100%;
      height: 210px;
      background: url('/static/image/course-img.png') no-repeat;
      background-size: cover !important;

      .banner-default-text {
        font-size: 22px;
        color: #fff;
        text-align: center;
        padding: 0 20px;
      }
    }
  }

  .page-info-wrap {
    position: relative;
    z-index: 1;
    background: #f6f6f6;
    padding: 10px;

    .info-base {
      position: relative;
      margin-top: -60px;
      background: #ffffff;
      border-radius: 6px;
      padding: 20px 13px 15px;

      .thumbUp-wrap {
        position: absolute;
        right: 15px;
        top: 10px;
        line-height: 20px;
        color: #7F7F7F;
        font-size: 14px;

        .van-icon {
          font-size: 16px;
          margin-right: 2px;

          &.van-icon-good-job {
            color: var(--color);
          }

          &.van-icon-star {
            color: var(--color);
          }
        }
      }

      .info-content {
        .left {
          width: 100%;
          //max-height: 50px;
          font-size: 18px;
          font-weight: bold;
          margin: 5px 0 15px;
        }

      }

      .top {
        display: flex;
        justify-content: space-between;
        line-height: 0;
        align-items: baseline;

        .top-left {
          .default-tag {
            margin-right: 5px;
          }
        }

        .top-right {
          .font-split {
            margin: 0 5px 0 8px;
            vertical-align: -2px;
          }

          .info-loc {
            max-width: 200px;
            display: inline-block;
            vertical-align: -2px;
          }
        }
      }

      .bottom, .bottom_2 {
        margin-top: 14px;

        i {
          min-width: 16px !important;
        }

        /*.tip-warp {
          line-height: 0;
          position: relative;
          .tip-text {
            position: absolute;
            top: -70px;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 20px;
            padding: 10px;
            background: rgba(0,0,0,0.6);
            border-radius: 4px;
            min-width: 314px;
            left: -280px;
            &::after {
              content: "";
              position: absolute;
              width: 0;
              height: 0;
              border: 5px solid transparent;
              bottom: -10px;
              right: 12px;
              border-top-color: rgba(0,0,0,0.6);
            }
          }
        }*/

        &.common-font {
          margin-left: 21px;
        }

        .icon-clock {
          margin-right: 5px;
          //margin-top: 2px;
        }

        .icon-user {
          background: url("../../../static/image/live-user.png");
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
          margin-top: 2px;
        }

        .icon-addr {
          background: url("../../../static/image/icon-addr.png");
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
          margin-top: 2px;
        }

        .icon-credit {
          margin-right: 5px;
          margin-top: 2px;
        }

        .icon-pointScore {
          margin-right: 5px;
          margin-top: 2px;
        }

        .icon-laiyuan {
          margin-right: 5px;
        }

        .common-font {
          display: inline-block;
          vertical-align: middle;
          margin-top: 2px;
        }

      }

      .bottom_2 {
        margin-top: 10px;
      }
    }

    .info-teac {
      margin-top: 10px;

      :deep(.van-swipe) {
        .van-swipe__indicator {
          background-color: #999;
          opacity: 1;
        }

        .van-swipe__indicator--active {
          background-color: $primaryColor;
        }
      }

      .teac-wrap {
        background: #fff;
        border-radius: 6px;
        padding: 15px 15px 25px;
        display: flex;
        min-height: 120px;

        img {
          margin-right: 8px;
        }

        .wrap-content {
          width: 85%;

          .name {
            line-height: 0;
          }

          .name-title {
            font-size: 16px;
            font-weight: bold;
            line-height: 22px;
          }
        }
      }
    }

  }

  .certificate-warp {
    background: #f6f6f6;
    padding: 10px;
    margin-top: -20px;

    .certificate {

      background: #ffffff;
      border-radius: 6px;
      padding: 15px 13px;

      .title {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
      }

      .detail-num {
        flex-wrap: wrap;
        padding: 5px 0 0;

        p {
          width: 33%;
          margin-top: 10px;
        }
      }
    }
  }

  .page-tab-wrap {
    position: relative;

    .page-tab-group {
      display: none;
      position: absolute;
      right: 0px;
      background-image: url("../../../static/image/tab_group.png");
      width: 18px;
      height: 15px;
      background-size: 100%;
      top: 12px;
      z-index: 999;
      background-color: #fff;
    }

    :deep(.van-tabs__nav) {
      .van-tab {
        max-width: 25%;
      }
    }

    &.fixed {
      .page-tab-group {
        position: fixed;
      }

      :deep(.van-tabs__wrap) {
        position: fixed;
        top: 0;
        z-index: 2;
        width: 100%;
      }

      :deep(.van-tabs__content) {
        padding-top: 44px;
      }
    }

    :deep(.course-base) {
      padding: 15px;
      img {
        max-width: 100%;
      }
      h1, h2, h3, h4, h5, text {
        height: auto !important;
      }
    }

    .detail-wrap {
      padding: 15px;
      border-top: 10px solid #f6f6f6;
    }
  }

  .page-ctrl-bar {
    display: flex;
    justify-content: space-between;
    position: fixed;
    align-items: center;
    width: 100%;
    background: #fff;
    bottom: 0;
    padding: 15px 15px 15px 25px;
    box-shadow: 0px 1px 0px 0px #eeeeee;
    z-index: 1;

    button {
      flex: 1;
      height: 40px;
      border-radius: 20px;
      border: 0;

      &:disabled {
        color: #7f7f7f;
        background: #dddddd;
        cursor: not-allowed;
      }

      & + button {
        margin-left: 15px;
      }
    }
  }

  :deep(.qy-com-appraise-list) .bottom-input-bar {
    z-index: 111;
  }

  :deep(.qy-com-discuss-list) .bottom-input-bar {
    z-index: 111;
  }

  .cer-draw-wrap {
    position: absolute;
    left: 15px;
    bottom: 70px;
    width: calc(100% - 30px);
    height: 50px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    border: 1px solid #eeeeee;
    padding: 0 15px;

    button {
      width: 72px;
      height: 28px;
      padding: 0 2px;
      border: none;
      background: linear-gradient(148deg, #fbd249 0%, #f5a623 100%);
    }
  }

  .list-item {
    width: 120px;
    padding: 16px;

    img {
      width: 16px;
      margin-right: 8px;
    }
  }

  .audit-wrap {
    .status {
      padding: 16px 20px;

      i {
        font-size: 18px;
        margin-right: 4px;
        color: #666;

        &.van-icon-passed {
          color: #7ed321;
        }

        &.van-icon-close {
          color: #e10c0c;
        }
      }
    }

    .remark {
      width: calc(100% - 40px);
      margin: 0 auto;
      padding: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #7f7f7f;
      line-height: 19px;
      background: #fafafa;
    }
  }
}
</style>
